<template>
  <!-- <div class="explore"> -->
  <!-- <div class="box" v-for="(item, index) in boxArr" :key="item" :ref="`cardRef${index + 1}`">
      <span>Box-0{{ item }}</span>
      <div class="highlight" v-if="showItem == item" :ref="`lightRef${index + 1}`"></div>
    </div> -->

  <div class="explore">
    <!-- <div class="box" v-for="(item, index) in boxArr" :key="item" :ref="el => setItemRefs(el)"><span>Box</span></div> -->
    <div class="box see-us" ref="cardRef1">
      <div class="content">
        <p class="bolder" ref="seeUs"></p>
      </div>
    </div>
    <div class="box introduction" ref="cardRef2">
      <div class="content">
        <h2>项目介绍</h2>
        <h3>Vue3+Vite+TypeScript+Pinia</h3>
        <div class="heilight animate__animated animate__bounceInLeft">
          <!-- <img src="./../../assets/images/finger.svg" alt=""> -->
          <span>展示一些高效、有趣的组件和页面</span>
        </div>
      </div>
    </div>
    <div class="box intorduction-fun" ref="cardRef3">
      <div class="content">
        <h3>功能介绍</h3>
        <ul>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li>动态导航栏</li>
          <li class="developing">待开发...</li>
        </ul>
      </div>
    </div>
    <div class="box" ref="cardRef4">
      <div class="content">
        <div>项目简介</div>
      </div>
    </div>
    <div class="box" ref="cardRef5">
      <div class="content">
        <div>项目简介</div>
      </div>
    </div>
    <div class="box" ref="cardRef6">
      <div class="content">
        <div>项目简介</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLightCard } from '@/hooks/use-light-card'
import { resourceUsage } from 'process'
const { cardRef: cardRef1 } = useLightCard({
  light: {
    width: 100,
    height: 100,
    color: 'var(--themeGreen)',
    blur: 50
  }
})
const { cardRef: cardRef2 } = useLightCard({
  light: {
    width: 100,
    height: 120,
    color: 'var(--primary)',
    blur: 50
  }
})
const { cardRef: cardRef3 } = useLightCard({
  light: {
    width: 100,
    height: 100,
    color: 'var(--warning)',
    blur: 50
  }
})
const { cardRef: cardRef4 } = useLightCard({
  light: {
    width: 100,
    height: 100,
    color: 'var(--success)',
    blur: 50
  }
})
const { cardRef: cardRef5 } = useLightCard({
  light: {
    width: 100,
    height: 100,
    color: 'var(--warning)',
    blur: 50
  }
})
const { cardRef: cardRef6 } = useLightCard({
  light: {
    width: 100,
    height: 100,
    color: 'var(--success)',
    blur: 50
  }
})
const seeUs = ref(null)
onMounted(() => {
  var originStr = '看见我们'
  var str = ''
  let n = 1
  let timer = setInterval(() => {
    if (n > 4) {
      clearInterval(timer)
      return
    }
    n++
    str += originStr.slice(0, 1)
    originStr = originStr.slice(1)
    seeUs.value.innerHTML = str
  }, 500)
})
</script>

<style scoped lang="scss">
$bgColor: rgb(13, 13, 13);
$startColor: #f0f0f0;
$startSize: 1px;

.explore {
  background-color: $bgColor;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  font-size: 20px;
  align-items: stretch;
  text-align: center;
  min-height: 100%;

  .box {
    background-color: rgb(23, 23, 23);
    margin: 20px;
    width: calc(70% - 40px);
    position: relative;
    min-height: 200px;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    &:hover {
      box-shadow: -10px 10px 20px #5f5f5f4b;
      transition: all 0.3s;
      // transform: translate(3px);
    }

    .content {
    }

    span {
      z-index: 1000;
      // position: relative;
      width: 100%;
      height: 100%;
    }
  }

  .box:nth-child(3n + 1),
  .box:nth-child(3n + 5) {
    width: calc(30% - 40px) !important;
  }

  .box:nth-child(8n - 1) {
    width: calc(70% - 40px) !important;
  }

  .see-us {
    .content {
      display: flex;
      align-items: center;
      width: 100px;

      .bolder {
        font-size: 50px;
        word-spacing: 10px;
        font-weight: 700;
      }
    }
  }

  .introduction {
    .content {
      h3 {
        margin-bottom: 10px;
      }

      .heilight {
        align-items: center;
        display: flex;
        color: rgb(152, 115, 204);
        text-decoration: underline wavy #f3ffbd;

        img {
          width: 40px;
          margin-right: 5px;
          height: 40px;
        }
      }
    }
  }

  .intorduction-fun {
    display: block;
    padding: 20px 50px;
    box-sizing: border-box;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      height: 200px;

      align-items: normal;
      text-align: left;

      li {
        margin-right: 10px;
        width: max-content;
        flex-grow: 0;
        flex-flow: 0;
        flex: 0 0 0;
      }
    }
  }
}
</style>
